<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Options for TimeMarks</title>
  <link rel="icon" type="image/png" href="icon.png" />
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/navBar.css">
  <link rel="stylesheet" href="css/options.css">
  <link rel="stylesheet" href="css/history.css">
  <link rel="stylesheet" href="css/changeLog.css">
  
  <script src="js/favicon.js"></script>
  <script src="js/jquery.js"></script> 
  <script src="js/changeLog.js"></script>
  <script src="js/options.js"></script>
  <script src="js/timeMarks.js"></script>
  <script type="text/javascript" src="js/chrome_ex_oauthsimple.js"></script>
  <script type="text/javascript" src="js/chrome_ex_oauth.js"></script>
  <script>

  
   function initOptions(){
      if(window.localStorage['geolocation']=="false"){
         $("#geolocation-option").attr("checked",false);
      }else{
         $("#geolocation-option").attr("checked",true);
      }
      
      if(window.localStorage['timemarksync']=="false"){
         $("#timemarksync-option").attr("checked",false);
      }else{
         $("#timemarksync-option").attr("checked",true);
      }
      
      $("#computer-name").val(window.localStorage['computer_name']);
   }
   
   $(document).ready(function(){
      $("#geolocation-option").change(function(){
         window.localStorage['geolocation'] = $("#geolocation-option").attr("checked");
      });
      $("#timemarksync-option").change(function(){
         window.localStorage['timemarksync'] = $("#timemarksync-option").attr("checked");
         if(window.localStorage['timemarksync'] == "true"){
            chrome.extension.sendRequest({'action' : 'initSync'});
         }else{
            chrome.extension.sendRequest({'action' : 'destroySync'});
         }
      });
      $("#save-computer-name").click(function(){
         window.localStorage['computer_name'] = $("#computer-name").val();
         alert("Computer name saved.");
      });
      
   });
  </script>
</head>
<body onload="setVersionNumber();initOptions();initView();">
  <div id="navbar-container"> 
     <h1 id="icon_settingsTitle_timeMark" class="settings-title" i18n-content="title"><img src="images/box0.png" class="icon" />Options</h1> 
     <div id="version">TimeMarks (v 0.0.0)</div>     
      <ul id="navbar"> 
     	<li id="navBar_general" class="navbar-item navbar-item-selected" tabindex="0" onClick="redirect_general();">General Information</li>
        <li id="navBar_traditional_history" class="navbar-item" tabindex="0" onClick="redirect_history();">Traditional History</li>
        <li id="navBar_timeMarks" class="navbar-item" tabindex="0" onClick="redirect_timeMarks();">TimeMark List</li>
        <li id="navBar_geo" class="navbar-item" tabindex="0" onClick="redirect_geo();">GeoLocation</li>
        <li class="navbar-item navbar-padding-line" tabindex="0"></li>
        <li class="navbar-item navbar-padding" tabindex="0"></li>
        <li id="navBar_homepage" class="navbar-item navbar-gray" tabindex="0" onClick="openWebpage('http://timemarks.co');">Visit TimeMarks Homepage</li>
         <li id="navBar_changeLog" class="navbar-item navbar-gray" tabindex="0" onClick="redirect_changeLog();">Change Log</li>
        
     </ul>
     
  </div>
  <div id="bodyCopy">
    <img src="images/box1.png"/>
    
    <div id="bodyCopy_geo" class="bodyCopy_options">
  		<h1>Geolocation</h1>
  		<input type="checkbox" id="geolocation-option">Use my current location in my timemarks
    </div>
    
     <div id="bodyCopy_general" class="bodyCopy_options">
  		<h1>Welcome to TimeMarks</h1>
       <div class="storycontent">
		<p>
        TimeMarks is a revolutionary Chrome Extension, changing the way we keep track of our web activity. TimeMarks are an alternative to bookmarking one page or another – forgetting to write down a URL – or having to manage hundreds of cumbersome links. Whenever you think to yourself, "Wow, this moment is important," make a TimeMark. No hassle, no fuss, no organizing needed. With the click of a button, you can label and save this entire moment. Later  – simply find your TimeMark.</p>	

		</div>
        
        <h2>Key Features:</h2>
       	<div class="storycontent">
   	 		<div class="feature" id="f_timeMarks">
            	<h3>TimeMarks</h3>
          If you are doing research, programming, or even planning a trip, you may have many many tabs open simultaniously. Use a TimeMark to save everything you are doing, right now. No need to organize, or bookmark. Just click the TimeMark icon <img src="images/timeMarkMarks/timemark_32_red.png" width="16" height="16">, and everything is saved. </div>
            <div class="feature" id="f_newHistory">
            	<h3>More Powerful History</h3>
                TimeMarks also provides a new interface to your traditional web history. Right now, it is just cleaner and easier to use. As we release updates, we will allow you to filter your content, and perform live search for faster history traversal!
            </div>
            <div class="feature" id="f_geo">
            	<h3>TimeMarks By Location</h3>
                Want to see the TimeMarks you made last time you were at work? Or maybe the TimeMarks you left at home, or in the coffee shop down the street. With our GeoLocation system, you can now see (and in the future filter) based on where you were when you TimeMarked.
            </div>
        </div>
        <h2>Additional Features:</h2>
        <div class="storycontent">
        <h3>TimeMarks</h3>
        <ul>
        	<li>Webpages in a TimeMark are grouped by window for easy organization</li>
        	<li>See how long each page was open when the TimeMark was made</li>             
        </ul>
        <h3>Traditional History</h3>
        <ul>
        	<li>Webpages opened at the same time are easy grouped together</li>
        	<li>Every time you visit a page, it will show up - unlike traditional histories</li>
        	<li>Easily go back and forth through your history</li>
        </ul>
        </div>
        
    </div>
    
    
    

    <div id="bodyCopy_timeMarks" class="bodyCopy_options">
  		<h1>TimeMarks</h1>
      <input type="checkbox" id="timemarksync-option">Sync my timemarks using my Google Docs account<br />
      Computer name:<input type="textbox" id="computer-name"/><input type="button" value="save" id="save-computer-name">
    </div>
    
      <div id="bodyCopy_history" class="bodyCopy_options">
  		<h1>Traditional Web History</h1>
    </div>
    
    <div id="bodyCopy_changeLog" class="bodyCopy_options">
  		<h1>Change Log</h1>
        <div id="bodyCopy_changeLogContent"></div>
    </div>
    
  </div> 
</body>
</html>
